<template>
  <div class="login">
    <div class="login-container">
      <h1>进思管理系统</h1>
      <el-form ref="loginFormRef" :model="loginForm" :rules="rules">
        <el-form-item prop="username">
          <el-input  v-model="loginForm.username"  :prefix-icon="Avatar"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" :prefix-icon="Avatar"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <div style="display: flex;">
              <el-input v-model="loginForm.code" :prefix-icon="Avatar"></el-input>
              <!-- 验证码 -->
              <img @click="getImg" class="code-img" :src="imgUrl" alt="">
          </div>
        </el-form-item>
        <el-form-item>
         <el-checkbox v-model="loginForm.isRember">记住密码</el-checkbox>
        </el-form-item>
        <el-form-item>
            <el-button style="width:100%;" type="primary" @click="toLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {Avatar} from '@element-plus/icons-vue'
import {ref,reactive,getCurrentInstance} from 'vue'
// getCodeImg 获取验证码接口
import { getCodeImg } from "@/api/login"

import Cookies from "js-cookie"
import { encrypt, decrypt } from "@/utils/jsencrypt"
// 导入用户管理的pinia 下面有登录方法
import useUserStore from '@/store/modules/user'

// vue3的路由的操作方法
import {useRouter,useRoute} from 'vue-router'

let router=useRouter();//获取路由操作实例
let route=useRoute();//获取路由信息实例



let UserStore=useUserStore(); //获取pinia的实例


// getCurrentInstance 获取当前实例
const { proxy } = getCurrentInstance()
 console.log(proxy,"当前组件实例")

let imgUrl=ref('')//存储返回的验证码base64 字符串

// 创建登录接口需要的参数
let loginForm=reactive({
  username:"", 
  password:"",
  code:"",
  uuid:"",//获取验证码接口返回的
  isRember:false,//是否记住密码
})

let rules={
  username:[{required:true,message:"请输入用户名",trigger:"blur"}],
  password:[{required:true,message:"请输入密码",trigger:"blur"}],
  code:[{required:true,message:"请输入验证码",trigger:"blur"}]
}
//获取表单元素
let loginFormRef=ref(null)
// 登录方法
let toLogin=()=>{
  //  proxy.$refs.loginFormRef 获取当前表单组件
  proxy.$refs.loginFormRef.validate(vali=>{
    if(vali){

      // 判断是否记住密码
      if(loginForm.isRember){
        Cookies.set("username", loginForm.username,{expires:30})
        Cookies.set("password", encrypt(loginForm.password),{expires:30})
        Cookies.set("isRember", loginForm.isRember,{expires:30})
      }else{
        Cookies.set("username", '')
        Cookies.set("password", '')
        Cookies.set("isRember", '')
      }



      console.log(vali,"通过了")
      // 调用actions写好的方法
      UserStore.login(loginForm).then(res=>{
        // 跳转首页
        router.push("/") //跳转首页

      }).catch(err=>{

      })
    }
  })
}

// setup 代替了 beforeCreated created beforeMount
let getImg=async ()=>{ //获取验证码接口
  let res=await getCodeImg();
  // base64 字符串拼接上data:image/png;base64 去img的src才可以渲染为图片 
  imgUrl.value='data:image/png;base64,'+res.img;
  loginForm.uuid=res.uuid;//reactive的赋值
  console.log(res,"验证码接口数据")
}
getImg();//调用方法

// 回显是否记录用户名 密码的回显
let showRember=()=>{
  if( Cookies.get('isRember')){
    loginForm.username=Cookies.get('username')
    loginForm.password=decrypt(Cookies.get('password'))
    console.log(Cookies.get('isRember'),"--------")

    loginForm.isRember=Boolean(Cookies.get('isRember'))
  }
}
showRember();

</script>

<style lang='scss' scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
  .login-container{
    width: 400px;
    height: 380px;
    background: white;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    .code-img{
      width: 130px;
      height: 40px;
      margin-left: 10px;
    }
  }
}

</style>
